<div class="tool-bar">
  <div class="time-ctrl">
  </div>
</div>

<div class="main-body">
  <div class='container-fluid'>
    <div class="left-pie-container">
      <a class="button-hide" (click)="isCollapsed = !isCollapsed">
        <span class="glyphicon glyphicon-move"></span>
      </a>
      <div (collapsed) = "collapsed($event)"
           (expanded)="expanded($event)"
           [collapse]="isCollapsed"
           class="card card-block card-header">
        <div>
            <app-chart-pie-with-legend [chartTitle]="chartTitle1" [chartData]="chartData1" [colorArray]="colorArray1" (changePieName)="filterTheclick($event)"></app-chart-pie-with-legend>
            <app-chart-pie-with-legend [chartTitle]="chartTitle2" [chartData]="chartData2" [colorArray]="colorArray2"></app-chart-pie-with-legend>
            <app-chart-pie-with-legend [chartTitle]="chartTitle3" [chartData]="chartData3" [colorArray]="colorArray3"></app-chart-pie-with-legend>
            <app-chart-pie-with-legend [chartTitle]="chartTitle4" [chartData]="chartData4" [colorArray]="colorArray4"></app-chart-pie-with-legend>
        </div>
      </div>
    </div>
    <div class="baiduMap" [style.width]="isfull?'80%':'100%'">
      <app-baidu-map [hotspots]="hotspots" [ischecked]="ischecked" [isfiltered]="isfiltered" (change)="checkChange($event)" ></app-baidu-map>
      <div class="screen" id="screen"><span>当前筛选条件：运行、混流式、50-300MW</span></div>
      <div class="floatdiv" id="floatdiv" [ngStyle]="{'display': ischecked === true ? 'block' : 'none'}">
        <div class="row">
          <div class="col-sm-2 title">乌江公司</div>
          <div class="col-sm-8">
            <div class="col-sm-2 status-name" style="font-size: 13px">监测状态：</div>
            <div class="col-sm-2">
              <div class="row">
                <div class="col-sm-5 status-icon status-icon-1"></div>
                <div class="col-sm-7 status-name">停机</div>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="row">
                <div class="col-sm-5 status-icon status-icon-2"></div>
                <div class="col-sm-7 status-name">正常</div>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="row">
                <div class="col-sm-5 status-icon status-icon-4"></div>
                <div class="col-sm-7 status-name">预警</div>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="row">
                <div class="col-sm-5 status-icon status-icon-5"></div>
                <div class="col-sm-7 status-name">报警</div>
              </div>
            </div>

          </div>
          <button class="close" (click)="close()">×</button>
          <button class="bigger" (click)="bigger()">※</button>

        </div>
        <div class="parting"></div>
        <div class="select">当前筛选条件是：运行、混流式。共{{33}}台机组满足筛选条件。</div>

        <div class="row">
          <div *ngFor="let company of companys" style="margin-left: 18px">
            <div class="col-sm-2 col-width" *ngFor="let unit of company.units ">
              <div class="row">
                <div class="col-sm-2 vertical ">{{company.name}}#{{unit.index}}</div>
                <div class="col-sm-1"></div>
                <div [ngSwitch]="unit.status">
                  <div *ngSwitchCase="'1'" class="col-sm-9 img1" (click)="toNextPage()"></div>
                  <div *ngSwitchCase="'2'" class="col-sm-9 img2" (click)="toNextPage()"></div>
                  <div *ngSwitchCase="'3'" class="col-sm-9 img3" (click)="toNextPage()"></div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="floatdiv2" id="floatdiv2">
        <div class="row">
          <div class="col-sm-2 title">乌江公司</div>
          <div class="col-sm-7">
            <div class="col-sm-2 status-name2" >监测状态：</div>
            <div class="col-sm-2">
              <div class="row">
                <div class="col-sm-5 status-icon status-icon-1"></div>
                <div class="col-sm-7 status-name2">停机</div>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="row">
                <div class="col-sm-5 status-icon status-icon-2"></div>
                <div class="col-sm-7 status-name2">正常</div>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="row">
                <div class="col-sm-5 status-icon status-icon-4"></div>
                <div class="col-sm-7 status-name2">预警</div>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="row">
                <div class="col-sm-5 status-icon status-icon-5"></div>
                <div class="col-sm-7 status-name2">报警</div>
              </div>
            </div>

          </div>
          <button class="close" (click)="close2()">×</button>
          <button class="bigger" (click)="smaller()">※</button>
        </div>
        <div class="parting"></div>
        <div class="select">当前筛选条件是：运行、混流式。共{{33}}台机组满足筛选条件。</div>

        <div class="row">
          <div *ngFor="let company of companys" style="margin-left: 15px">
            <div class="col-sm-2 col-width" *ngFor="let unit of company.units ">
              <div class="row">
                <div class="col-sm-2 vertical2 ">{{company.name}}#{{unit.index}}</div>
                <div class="col-sm-1"></div>
                <div [ngSwitch]="unit.status">
                  <div *ngSwitchCase="'1'" class="col-sm-9 img12" (click)="toNextPage()"></div>
                  <div *ngSwitchCase="'2'" class="col-sm-9 img22" (click)="toNextPage()"></div>
                  <div *ngSwitchCase="'3'" class="col-sm-9 img32" (click)="toNextPage()"></div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

